<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>创建人:</span>
        <select class="select" v-model="peopleSelect">
          <option v-for="(item, key) in peopleOption" :label="item.POSITION" :value="key"></option>
        </select>
        <el-button type="primary" @click="getTeacherData()" size="small">确认</el-button>
        <div class="right">
          <el-button type="success" @click="retrievalAddShow" size="small">新建</el-button>
        </div>
      </div>
      <div class="bottom">
        <a :href="`http://119.23.36.128:8020/yxt-web/teacher/manage/teacherinfo/template?yxt-xtoken=${exportUrl}`">
          <el-button type="primary" size="small">下载模板</el-button>
        </a> 
      	<input type="text" class="bottom-text">
      	<el-button type="primary" size="small">浏览</el-button>
      	<el-button type="primary" size="small">上传文件</el-button>
      	<a :href="`http://119.23.36.128:8020/yxt-web/teacher/manage/teacherinfo/export?yxt-xtoken=${exportUrl}`">
          <el-button type="primary" size="small">导出</el-button>
        </a>
      </div>
    </div>

    <div class="secondline">
      <div class="review">
        <img :src="IMGBASE64.QINGJIAFUDAO2X" class="orange">
        <span class="title">每周点评</span>
        <div class="kong"></div>
        <template>
          <el-table :data="tableData" style="width: 100%" @cell-click="showDetails" @row-click="deleteTeaData">
            <el-table-column prop="value" label="#" min-width="" align="center"></el-table-column>
            <el-table-column prop="idNo" label="模板类型" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
            <el-table-column prop="mobile" label="模板内容" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
            <el-table-column prop="grade" label="创建人" min-width="" align="center"></el-table-column>
            <el-table-column prop="subject" label="创建时间" min-width="" align="center"></el-table-column>
            <el-table-column label="操作" align="center" min-width="">
              <template scope="scope">
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-show="paging"
            @current-change="handleCurrentChange"
            :page-size="20"
            layout="prev, pager, next, jumper"
            :total="total"
            class="pull-right">
          </el-pagination>
        </template>
      </div>

      <div class="right">
        <header>
          <span>模板类型</span>
          <el-button type="success" @click="upshow()" size="mini">新建</el-button>
          <div class="clear"></div>
        </header>
        <div class="row" v-for="item in rightArray">
          <span>{{item.value}}</span>
          <!-- <img src=""> -->
        </div>
      </div>
    </div>

    <div class="retrievalUp" v-show="retrievalAdd">
      <img :src="IMGBASE64.GREENXINZENG2X" class="orange">
      <span class="title">新增评语</span>
      <el-button icon="close" class="close" @click="retrievalAddShow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="row">
        <span>模版类型:</span>
        <select>
          <option></option>
        </select>
      </div>
      <div class="row">
        <span class="textareaSpan">模版内容:</span>
        <textarea rows="10" cols="70"></textarea>
      </div>
      <div class="bottom">
        <div class="left">
          <el-checkbox v-model="checked1">继续新建</el-checkbox>
        </div>
        <div class="right">
          <el-button type="success" @click="retrievalAddShow">确定</el-button>
          <el-button @click="retrievalAddShow">取消</el-button>
        </div>
      </div>
    </div>

    <div class="up" v-show="isSuccess">
      <img :src="IMGBASE64.GREENXINZENG2X" class="orange">
      <span class="title">新增类型</span>
      <el-button icon="close" class="close" @click="upshow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="row">
        <span>模板类型:</span>
        <input type="text" class="up-text" v-model="upText">
      </div>
      <div class="bottom">
        <div class="left">
          <el-checkbox v-model="checked">继续新建</el-checkbox>
        </div>
        <div class="right">
          <el-button type="success" @click="addRightRow">确定</el-button>
          <el-button @click="upshow">取消</el-button>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="black"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      upText: null,
      isSuccess: false,
      retrievalAdd: false,
      black: false,
      checked: false,
      checked1: false,
      peopleSelect: null,
      peopleOption: [],
      rightArray: [{
        value: '123123'
      }]
    }
  },
  mounted () {

  },
  methods: {
    upshow () {
      this.isSuccess = !this.isSuccess
      this.black = !this.black
    },
    addRightRow () {
      this.rightArray.push({value: this.upText})
      if (this.checked === true) {
        this.upText = null
        this.checked = false
      } else {
        this.upText = null
        this.isSuccess = !this.isSuccess
        this.black = !this.black
      }
    },
    retrievalAddShow () {
      this.retrievalAdd = !this.retrievalAdd
      this.black = !this.black
    },
    showDetails () {},
    deleteTeaData () {},
    handleCurrentChange () {}
  }
}
</script>

<style lang="less" scoped>
  @import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .select{
        width: 10%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 35%;
        float: right;
        margin-right: 3%;
        text-align: right;
        &-text{
          width: 58%;
          border: 0;
          border-bottom: 1px solid #D7D7D7;
        }
      }
    }
    .bottom{
      &-text{
        width: 20%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
  }

  .orange{
    position: absolute;
    left: 24px;
    top: -25px;
  }

  .secondline{
    margin-top: 40px;
    .review{
      width: 65%;
      position: relative;
      margin-left: 2%;
      float: left;
      background: #FFF;
      border-radius: 5px;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
      .title{
        margin-left: 120px;
      }
    }

    .right{
      width: 29%;
      background: #FFF;
      margin-left: 2%;
      margin-right: 2%;
      float: right;
      border-radius: 5px;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
      header{
        line-height: 36px;
        border-bottom: 1px solid #d7d7d7;
        span{
          margin-left: 10px;
        }
      }
      .el-button{
        margin-top: 8px;
        margin-right: 10px;
        float: right;
      }
      .clear{
        clear: both;
      }
      .row{
        height: 36px;
        line-height: 36px;
        border-bottom: 1px solid #d7d7d7;
        span{
          margin-left: 10px;
        }
      }
    }
  }

  .retrievalUp{
    width: 60%;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -30%;
    padding: 20px 20px 0 20px;
    z-index: 99999;
    padding: 20px 20px 0 20px;
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    .title{
      margin-left: 90px;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .row{
      margin-top: 20px;
      margin-left: 8%;
      position: relative;
      .textareaSpan{
        position: absolute;
        top: 0;
        left: 0;
      }
      select{
        width: 20%;
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
      textarea{
        margin-left: 70px;
        resize:none
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }

  .up{
    width: 40%;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -20%;
    padding: 20px 20px 0 20px;
    z-index: 99999;
    padding: 20px 20px 0 20px;
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    .title{
      margin-left: 90px;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .row{
      height: 80px;
      margin-top: 20px;
      margin-left: 8%;
      .up-text{
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
